/**
 * Created by hejg on 2018/5/15.
 */
import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableHighlight,
    TouchableOpacity
} from 'react-native';
import {withNavigation} from 'react-navigation';
import HomeModuleFrame from './HomeModuleFrame';
import Style from '../../../../components/Style';
import Tool from "../../../../components/Tool";
import Indicator from '../../../../components/Indicator';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
import DropDown from '../../../../components/DropDown';
import Echarts from 'native-echarts';
var Dimensions = require('Dimensions');
const Color = Style.color;
export default class HomeImportantFollow extends Component {
    constructor(props){
        super(props);
        this._changeTitle=this._changeTitle.bind(this);
        this.state = {
            dataList:[],
            showList:[],
            titleList:[],
            showTitle:'',
            selectIndex:0,
            isFlag:false,//如果是物联网做特殊处理
            indicator: {visible: true, message: ''}//控制遮罩层,
        }
    }
    componentDidMount(){
        this._getListInfo();
    }
    _getListInfo() {
        let _this = this;
            Tool.fetchJson(Tool.appPath.mkst + 'pattern/getHomepagePatternInfo', '', function (data) {
                if(data.state){
                    _this.setState({
                        dataList:data.info,
                        showList:data.info[0].patterns,
                        showTitle:data.info[0].indexName,
                        indicator: {visible: false, message: ''}
                    });
                    _this._getTitle(data.info);
                }else{
                    _this.setState({indicator: {visible: false, message: Style.tip.noData}});
                }

            }, function (error) {
                    _this.setState({indicator: {visible: false, message: Style.tip.noData}});
            },
            function () {
            }
        )
    }
    _getTitle(data){
        let array = [];
        for(let i=  0;i< data.length;i++){
            array.push({label:data[i].indexName,value:i})
        }
        //TODO
        array.push({label:'物联网格局战',value:1})
        this.setState({
            titleList:array
        });
    }
    _changeTitle(code){
        let index = code;
        if(code==1){
            code=0;
        }
        let list = this.state.dataList;
        this.setState({
            showList:list[code].patterns,
            selectIndex:index,
            showTitle:this.state.titleList[index].label, //TODO list[code].indexName
        });
    }
    render() {
        return (
            <View>
                <View style={{minHeight:400}}>
                    <View>
                        <HomeFollowHead
                            change={this._changeTitle}
                            name={this.state.showTitle}
                            selectIndex={this.state.selectIndex}
                            titleList={this.state.titleList} />
                        {this.state.showList.map((item, index) => (
                            <HomeFollowItem
                                title={item.indexName}
                                code={item.indexCode}
                                data={item.patterns}
                                ratio={item.value}
                                fieldType={3}
                                isFlag={this.state.showTitle=='物联网格局战'?true:false} //TODO item.indexName
                                key={`HomeIndexSwiperItem_${index}`}
                                color={Color.heightBlue}
                            />
                        ))}
                    </View>
            </View>
            <Indicator isVisible={this.state.indicator.visible} message={this.state.indicator.message}/>
            </View>
        );
    }
}
class HomeFollowHead extends Component{
    render(){
        return(
            <View style={styles.FollowHeaderView}>
                <DropDown color={Style.color.heightBlue}
                        data={this.props.titleList}
                          defaultIndex={this.props.selectIndex}
                          onConfirm={(index)=>this.props.change(index)}
                      title={'请选择指标'}
                      contentComponent={
                         <View style={styles.imIcon}>
                             <ChoseIcon name={"sort"} size={18} color={Color.black}/>
                             <Text style={{marginLeft: 10}}>{this.props.name}</Text>
                         </View>
                      }
                />
            </View>
        )
    }
}
const HomeFollowItem = withNavigation(class HomeFollowItem extends Component {
    _getRadio(value){
        let str=Number(Number(value*100).toFixed(1));
        return str;
    }
    constructor(props){
        super(props);
        this.state={
            isVisible:false,
        }
    }
    _showMap(){
        if(this.state.isVisible){
            this.setState({
                isVisible:false
            });
        }else{
            this.setState({
                isVisible:true
            });
        }
    }
    render() {
        const option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top:'10%',
                containLabel: true
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                formatter: '{c}',
                backgroundColor: 'rgba(0,0,0,0)',
                textStyle: {color: Color.blue},
                position: function (point, params, dom, rect, size) {
                    return [point[0], 5];
                },
                axisPointer: {type: 'line', lineStyle: {color:'#c0c0c0'}}
            },
            xAxis: {
                type: 'category',
                axisLabel: {textStyle: {color: Color.gray}},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false},
                data: [100, 200, 300]
            },
                yAxis: {
                    type: 'value',
                    axisLabel: {textStyle: {color:Color.gray}},
                    axisLine: {show: false},
                    axisTick: {show: false},
                    splitLine: {show: false}
                },
                series: [{
                    type: 'line',
                    smooth: true,
                    data: [10,20,30]
                }],
                color: [Color.blue]
            }
        let data = this.props.data;
        return (
            <View style={styles.infoView} underlayColor={Style.color.lightGray}>
                <View style={styles.FollowItemView}>
                    <TouchableOpacity
                        onPress={() =>this.props.navigation.navigate('ImportFollow',{headerTitle:'格局战详情',indexName:this.props.title,indexCode:this.props.code})}
                        style={[styles.FollowItemHeaderView,{ justifyContent:this.props.isFlag?'center':'space-between', }]}>
                         <Text style={styles.FollowItemHeaderTitle}>{this.props.title}</Text>
                        {
                            this.props.isFlag?
                                null:
                                <View  style={{flexDirection:'row'}}>
                                    <KpiItem name={this.props.data[0].indexName} value={this.props.data[0].value}/>
                                    <KpiItem name={this.props.data[1].indexName} value={this.props.data[1].value}/>
                                </View>
                        }
                    </TouchableOpacity>
                    <TouchableOpacity style={{justifyContent:'center'}} onPress={()=>this._showMap()}>
                        <ListRight name={'完成率'} value={'20'} color={this.props.color}/>
                    </TouchableOpacity>
                </View>
                {
                    this.state.isVisible == true ?
                        <View >
                            <View style={styles.echartsTitle}>
                                <Text style={{textAlign:'center',color:Color.black}}>近15日指标趋势变化</Text>
                            </View>
                            <View style={styles.echartsView}>
                                <Echarts option={option} height={180} width={Dimensions.get('window').width}/>
                            </View>
                            {
                                this.props.isFlag?
                                    <View>
                                        <InternetItem name={'当日新增连接数(线网)'} num={10}/>
                                        <InternetItem name={'当日新增连接数(专网)'} num={10}/>
                                    </View>
                                    :null
                            }
                    </View>
                        :null
                }
            </View>
        );
    }
});
class ListRight extends Component{
    render(){
        return(
            <View  style={styles.FollowItemFootView}>
                <View style={{flexDirection:'column',marginRight:10}}>
                    <Text>{this.props.name}</Text>
                    <Text style={[styles.FollowItemHeaderRatio,{color: this.props.color}]}>{this.props.value}%</Text>
                </View>
                <View>
                    <ChoseIcon name={'angle-down'} size={20} color={Color.gray}/>
                </View>
            </View>
        )
    }
}
class KpiItem extends  Component{
    render(){
        return(
            <View style={{flexDirection:'row',marginRight:20}}>
                <Text style={styles.FollowItemFootTitle}>{this.props.name}：</Text>
                <Text style={styles.FollowItemFootValue}>{this.props.value}</Text>
            </View>
        )
    }
}
class InternetItem extends  Component{
    render(){
        return(
            <View style={styles.internetKpiView}>
                <Text style={{fontSize:Style.fontSize.normal}}>{this.props.name}</Text>
                <Text style={{color:Style.color.blue}}>{this.props.num}</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    FollowHeaderView: {
        marginVertical: 5,
        height:60,
        backgroundColor:Style.color.white,
        paddingLeft:20,
        paddingRight:20,
        flexDirection:'row',
        alignItems:'center'
    },
    imIcon:{
       flexDirection:"row",
    },
    FollowHeaderTitle: {
        fontSize: Style.fontSize.normal, color: Style.color.gray,marginLeft: 10
    },
    FollowHeaderSquare: {
        height: 5, width: 15, borderRadius: 2, backgroundColor: Style.color.blue, marginVertical: 5
    },
    FollowHeaderValue: {
        fontSize: Style.fontSize.normal, color: Style.color.blue, fontWeight: 'bold'
    },
    infoView:{
        marginBottom:5,
    },
    FollowItemView: {
        borderTopWidth: 1,
        borderColor: Style.color.lightGray,
        paddingHorizontal: 10,
        height:Style.css.listHeight,
        backgroundColor:Style.color.white,
        flexDirection:'row'
    },
    FollowItemHeaderView: {
        flexDirection: 'column',marginVertical: 5,flex:1
    },
    FollowItemHeaderTitle: {
        fontSize: Style.fontSize.normal, color: Style.color.black, fontWeight: 'bold'
    },
    FollowItemHeaderRatio: {
        fontSize: Style.fontSize.normal,
    },
    FollowItemFootView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginVertical: 5,
        alignItems:'center',
    },
    FollowItemFootTitle: {
        fontSize: Style.fontSize.middle,
    },
    FollowItemFootValue: {
        fontSize: Style.fontSize.middle, color: Style.color.blue,
    },
    echartsTitle:{height:30,
        shadowColor:Color.gray,
        elevation: 1,
        borderTopWidth:1,
        borderColor:Color.lightGray,
        borderBottomWidth:1,
        backgroundColor:Color.white,
        justifyContent:'center'},
    echartsView:{
        backgroundColor:Color.white,marginRight:8,marginLeft:8,
        borderLeftWidth:1,
        borderRightWidth:1,
        borderStyle:'dotted',
        borderColor:Color.lightGray,
    },
    internetKpiView:{marginTop:5,flexDirection:'row',backgroundColor:'#E4F6FF',height:40, alignItems:'center',justifyContent:'space-between',paddingLeft:20,paddingRight:40},
});